<template>
	<view>
		<checkbox-group @change="onChange">
			<view class="checkView" v-for="(item,index) in cartList" :key="item.id">
				<checkbox class="ckBox" :value="item.id" :checked="item.checked" />  
				<text class="nameText">{{ item.name }}</text>
				<text class="priceText">{{ item.price }}</text>
				<text class="delBtn" @click="delItem(item.id)">删除</text>
			</view>
		
		</checkbox-group>
		<view class="bottomText">
			<checkbox-group class="allCheckG" @change="allChange"> 
					<checkbox class="ckBoxAll" value="全部选择" :checked="allChecked" /><text>全部选择</text>
			</checkbox-group>
			<text class="allGoods">共{{ totalGoods }}件商品</text>
			<text class="allPrice">共计{{ totalMoney }}元</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed, ref, watch } from 'vue';

	const cartList = ref([
		{id:'1',price:4999,name:'小米',checked:false},
		{id:'2',price:8899,name:'华为',checked:false},
		{id:'3',price:9999,name:'苹果',checked:false},
		{id:'4',price:4599,name:'荣耀',checked:false}
	])
	// 被选中的多选框数组
	const selectedItems = ref([])
	// 总共被选中的商品数量
	const totalGoods = computed(()=>{
		// console.log(cartList.value.filter(item=>item.checked).length);
		 return cartList.value.filter(item=>item.checked).length
	})
	// 多选框的选择事件
	const onChange =(e)=>{
		// console.log(e.detail.value.length);
		selectedItems.value = e.detail.value
		// 这里可以使用forEach的方法，也可以使用map的方法。注意当用map的方法的时候需要用... 进行解构赋值。
		cartList.value.forEach(item=>item.checked = selectedItems.value.includes(item.id))
		// console.log(cartList.value);
	}
	
	// 当列表中所有数据都被勾选，表示下方全选按钮勾上。
	// 方法一：使用计算属性
	// const allChecked = computed(()=>{
	// 	return cartList.value.every(item=>item.checked)
	// })
	// 方法二：使用监听器
	const allChecked = ref(false)
	watch(cartList,()=>{
		allChecked.value = cartList.value.every(item=>item.checked)
		console.log(allChecked.value);
	},{deep:true})
	const allChange =(e)=>{
		console.log(e.detail.value.length);
		cartList.value.forEach(item=>item.checked = e.detail.value.length ? true : false)
	}
	// 使用计算属性获得总价
	const totalMoney = computed(()=>{
		return cartList.value.filter(item=>item.checked).reduce((prev,current)=>prev+current.price,0)
	})
	const delItem =(id)=>{
		 cartList.value=cartList.value.filter(item=>item.id !== id)
	}
	
</script>

<style scoped lang="scss">
	.checkView{
		padding: 0 10px;
		box-sizing: border-box;
	
		.nameText{
			margin-left: 10px;
		}
		.priceText{
			margin-left: 10px;
		}
		.delBtn{
			color: red;
			margin-left: 30px;
		}
		
	}
	.ckBoxAll{
			padding: 0 10px;
			box-sizing: border-box;
	}
	.bottomText{
		margin-top: 20px;
		display: flex;
		.allGoods{
			margin-left: 30px;
		}
		.allPrice{
			margin-left: 20px;
		}
		.allCheckG{
			width: 150px;
		}
	}
	
</style>
